Rewrite the layout code of the message tray

Previous code had a mixture of fixed positioning and ClutterBinLayout,
and this was broken badly for autorun notifications.
Rewrite to use ClutterBinLayout and Clutter properties exclusively.

https://bugzilla.gnome.org/show_bug.cgi?id=683378

diff --git a/js/ui/layout.js b/js/ui/layout.js
index d2daafead0e7e4651da95883f8282baee3932294..7baa27797c075a23064dc4118bb8a19eca110a3c 100644 (file)
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -120,7 +120,8 @@ const LayoutManager = new Lang.Class({
         this.panelBox.connect('allocation-changed',
                               Lang.bind(this, this._updatePanelBarriers));
 
-        this.trayBox = new St.BoxLayout({ name: 'trayBox' }); 
+        this.trayBox = new St.Widget({ name: 'trayBox',
+                                       layout_manager: new Clutter.BinLayout() }); 
         this.addChrome(this.trayBox);
         this.trayBox.connect('allocation-changed',
                              Lang.bind(this, this._updateTrayBarrier));

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 1f1593dcca06cbefd78bbe2e89f3fe537f01d4b5..329b74b5ad5e4ac2dcd0f356c8b57c008d1f5d91 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1368,39 +1368,45 @@ const MessageTray = new Lang.Class({
         }));
 
         this.actor = new St.Widget({ name: 'message-tray',
-                                     layout_manager: new Clutter.BinLayout(),
                                      reactive: true,
-                                     track_hover: true });
-        this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
+                                     track_hover: true,
+                                     layout_manager: new Clutter.BinLayout(),
+                                     x_expand: true,
+                                     y_expand: true,
+                                     y_align: Clutter.ActorAlign.START,
+                                   });
         this.actor.connect('notify::hover', Lang.bind(this, this._onTrayHoverChanged));
 
         this._notificationWidget = new St.Widget({ name: 'notification-container',
+                                                   x_align: Clutter.ActorAlign.CENTER,
+                                                   x_expand: true,
                                                    layout_manager: new Clutter.BinLayout() });
         this.actor.add_actor(this._notificationWidget);
 
-        this._notificationBin = new St.Bin();
+        this._notificationBin = new St.Bin({ y_expand: true });
+        this._notificationBin.set_y_align(Clutter.ActorAlign.START);
         this._notificationWidget.add_actor(this._notificationBin);
         this._notificationWidget.hide();
         this._notificationQueue = [];
         this._notification = null;
         this._notificationClickedId = 0;
 
-        this._summaryBin = new St.Bin({ x_align: St.Align.END,
-                                        y_expand: true, // this is the Clutter property
-                                        reactive: true });
-        this._summaryBin.connect('button-release-event', Lang.bind(this, function(actor, event) {
+        this.actor.connect('button-release-event', Lang.bind(this, function(actor, event) {
             this._setClickedSummaryItem(null);
             this._updateState();
             actor.grab_key_focus();
         }));
-        this.actor.add_actor(this._summaryBin);
         this._summary = new St.BoxLayout({ name: 'summary-mode',
                                            reactive: true,
-                                           track_hover: true });
+                                           track_hover: true,
+                                           x_align: Clutter.ActorAlign.END,
+                                           x_expand: true,
+                                           y_align: Clutter.ActorAlign.CENTER,
+                                           y_expand: true });
         global.focus_manager.add_group(this._summary);
         this._summary.connect('notify::hover', Lang.bind(this, this._onSummaryHoverChanged));
-        this._summaryBin.child = this._summary;
-        this._summaryBin.opacity = 0;
+        this.actor.add_actor(this._summary);
+        this._summary.opacity = 0;
 
         this._summaryMotionId = 0;
         this._trayMotionId = 0;
@@ -1469,9 +1475,6 @@ const MessageTray = new Lang.Class({
         Main.layoutManager.trackChrome(this._notificationWidget);
         Main.layoutManager.trackChrome(this._closeButton);
 
-        Main.layoutManager.connect('monitors-changed', Lang.bind(this, function() {
-            this.actor.style_changed();
-        }));
         Main.layoutManager.connect('primary-fullscreen-changed', Lang.bind(this, this._onFullscreenChanged));
 
         Main.overview.connect('showing', Lang.bind(this,
@@ -1550,15 +1553,6 @@ const MessageTray = new Lang.Class({
         }
     },
 
-    _onStyleChanged: function() {
-        let monitor = Main.layoutManager.bottomMonitor;
-
-        let width = this._notificationWidget.get_width();
-        this._notificationWidget.x = Math.floor((monitor.width - width) / 2);
-        this._summaryBin.x = 0;
-        this._summaryBin.width = monitor.width;
-    },
-
     contains: function(source) {
         return this._getIndexOfSummaryItemForSource(source) >= 0;
     },
@@ -2311,18 +2305,16 @@ const MessageTray = new Lang.Class({
     },
 
     _showSummary: function() {
-        this._summaryBin.opacity = 0;
-        this._summaryBin.y = this.actor.height;
-        this._tween(this._summaryBin, '_summaryState', State.SHOWN,
-                    { y: 0,
-                      opacity: 255,
+        this._summary.opacity = 0;
+        this._tween(this._summary, '_summaryState', State.SHOWN,
+                    { opacity: 255,
                       time: ANIMATION_TIME,
                       transition: 'easeOutQuad',
                     });
     },
 
     _hideSummary: function() {
-        this._tween(this._summaryBin, '_summaryState', State.HIDDEN,
+        this._tween(this._summary, '_summaryState', State.HIDDEN,
                     { opacity: 0,
                       time: ANIMATION_TIME,
                       transition: 'easeOutQuad',